<template>
    <div class="main_container" style="width: 100%">
        <el-header style="text-align: right; font-size: 12px">
            <div class="pageHeader_container">
                <el-page-header @onclick="" content="门诊发药"></el-page-header>
                <el-button icon="el-icon-refresh" circle class="edit_refresh"
                           size="small" @click="refresh()"></el-button>
            </div>
        </el-header>
        <el-main>
            <div class="center_container">
                <div class="top_container">
                    <div class="center_left_container">
                        <el-form :model="searchform" ref="searchform"
                                 label-width="70px" class="searchForm">
                            <el-row :gutter="10">
                                <el-col :span="13">
                                    <el-form-item label="病历号" prop="name" class="search_caseNumber">
                                        <el-input v-model="searchform.casenumber" class="search_input"></el-input>
                                        <div class="radio_container">
                                            <el-radio v-model="searchform.isdispense" label="false">未发药</el-radio>
                                            <el-radio v-model="searchform.isdispense" label="true">其他</el-radio>
                                        </div>

                                    </el-form-item>
                                </el-col>
                                <el-col :span="10">
                                    <div class="button_container">
                                        <el-row class="top_button">
                                            <el-button round @click="" class="header_button_submit"
                                                       @click="search()">搜索
                                            </el-button>
                                        </el-row>
                                        <el-row>
                                            <el-button round @click="resetForm()" class="header_button_reset">重置
                                            </el-button>
                                        </el-row>
                                    </div>

                                </el-col>
                            </el-row>


                        </el-form>
                    </div>

                    <div class="center_right_container">
                        <div class="table_container">
                            <el-table :data="patienttable.slice((currentPage-1)*pageSize , currentPage*pageSize)"
                                      stripe style="width: 100%"
                                      :header-row-style="{height:'40px'}"
                                      :cell-style="{padding:'0'}"
                                      :header-cell-style='headerStyle'
                                      :row-style="{height: '45px'}">
                                <el-table-column prop="casenumber" label="病历号" width="180"></el-table-column>
                                <el-table-column prop="realname" label="姓名" width="120"></el-table-column>
                                <el-table-column
                                        fixed="right"
                                        label="操作"
                                        width="190">
                                    <template slot-scope="scope1">
                                        <el-button type="text" size="small" @click="checkDispenser(scope1.row)">查看处方单
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="pagination_container">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :pager-count="5"
                                    :current-page="this.currentPage"
                                    :page-size="2"
                                    layout="prev, pager, next"
                                    background
                                    :total="patienttable.length">
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <div class="center_main_container">

                    <div class="dispense_table_container">
                        <el-table
                                :data="sendList"
                                stripe
                                style="width:100%"
                                :header-row-style="{height:'40px'}"
                                :cell-style="{padding:'0'}"
                                :header-cell-style='headerStyle'
                                :row-style="{height: '45px'}"
                                :span-method="arraySpanMethod">
                            <el-table-column prop="prescriptionid" label="处方号" width="90"></el-table-column>
                            <el-table-column prop="drugsname" label="药品名称" width="190"></el-table-column>
                            <el-table-column prop="drugsformat" label="规格" width="160"></el-table-column>
                            <el-table-column prop="amount" label="数量" width="70"></el-table-column>
                            <el-table-column prop="drugsunit" label="单位" width="80"></el-table-column>
                            <el-table-column prop="drugsprice" label="单价" width="90"></el-table-column>
                            <el-table-column prop="drugMoney" label="总金额" width="90"></el-table-column>
                            <el-table-column prop="manufacturer" label="厂家" width="190"></el-table-column>
                            <el-table-column prop="dosage" label="单次用量" width="103"></el-table-column>
                            <el-table-column prop="state" label="发药状态" width="100"></el-table-column>
                        </el-table>
                    </div>
                    <div class="buttonSection_container">
                        <div class="print_container">
                            <el-button @click="open1" class="printButton" round>
                                打印发药单
                            </el-button>
                        </div>

                    </div>
                </div>

            </div>

        </el-main>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "dispatch",

    data() {
        return {
            searchform: {
                casenumber: '',
                isdispense: 'false'
            },
            patienttable: [{
                casenumber: '',
                realname: ''
            }, {
                casenumber: '',
                realname: ''
            }],
            sendList: [
                {
                    prescriptionid: "",
                    drugsname: "",
                    drugsformat: "",
                    amount: "",
                    drugsunit: "",
                    drugsprice: "",
                    DrugMoney: "",
                    manufacturer: "",
                    dosage: "",
                    state: "",
                },
                {
                    prescriptionid: "",
                    drugsname: "",
                    drugsformat: "",
                    amount: "",
                    drugsunit: "",
                    drugsprice: "",
                    DrugMoney: "",
                    manufacturer: "",
                    dosage: "",
                    state: "",
                },
                {
                    prescriptionid: "",
                    drugsname: "",
                    drugsformat: "",
                    amount: "",
                    drugsunit: "",
                    drugsprice: "",
                    DrugMoney: "",
                    manufacturer: "",
                    dosage: "",
                    state: "",
                }, {
                    prescriptionid: "",
                    drugsname: "",
                    drugsformat: "",
                    amount: "",
                    drugsunit: "",
                    drugsprice: "",
                    DrugMoney: "",
                    manufacturer: "",
                    dosage: "",
                    state: "",
                },
                {
                    prescriptionid: "",
                    drugsname: "",
                    drugsformat: "",
                    amount: "",
                    drugsunit: "",
                    drugsprice: "",
                    DrugMoney: "",
                    manufacturer: "",
                    dosage: "",
                    state: "",
                },
            ],

            currentPage: 1,          // 当前页码
            total: "",                // 总条数
            pageSize: "2",          // 每页的数据条数
            headerStyle: {
                'height': '30px',
                'padding': '10px',
                'background': '#F9F6F6',
                'color': '#9F9E9D',
            },
            /*            indexArr: [],
                        spanArr: [],
                        pos: 0, rowIndex: '-1',
                        OrderIndexArr: [],
                        hoverOrderArr: [],
                        selectedID: '',*/
        }
    },
    methods: {
        refresh() {
            location.reload();
        },
        search() {
            // this.searchform.isdispense == "false" 还没发就是要发
            // 要发，有病历号
            if ("" !== this.searchform.casenumber && this.searchform.isdispense == "false") {
                axios.get('http://localhost:8888/dispatch/select/byCaseNumber/' + this.searchform.casenumber)
                        .then((response) => {
                            this.patienttable = response.data;
                        })
            }
            // 要发，没病历号
            else if ("" == this.searchform.casenumber && this.searchform.isdispense == "false") {
                axios.get('http://localhost:8888/dispatch/select/byState')
                        .then((response) => {
                            this.patienttable = response.data;
                        })
            }
            // 不发，有病历号
            else if ("" !== this.searchform.casenumber && this.searchform.isdispense == "true") {
                axios.get('http://localhost:8888/dispatch/select/nostate/' + this.searchform.casenumber)
                        .then((response) => {
                            this.patienttable = response.data;
                        })
            }
            // 不发，没有病历号
            else if ("" == this.searchform.casenumber && this.searchform.isdispense == "true") {
                axios.get('http://localhost:8888/dispatch/select/all')
                        .then((response) => {
                            this.patienttable = response.data;
                        })
            }
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        checkDispenser(e) {
            axios('http://localhost:8888/dispatch/query/dispenseDetail/' + e.casenumber).then((response) => {
                console.log(response);
                this.sendList = response.data;
            })
            this.selectedID = e.casenumber;
        },
        open1() {
            axios.put('http://localhost:8888/dispatch/update/state/' + this.selectedID).then((response) => {
                if (response.status == "200") {
                    this.$message.success("发药成功");
                } else {
                    this.$message.error("发药错误");
                }

            })
            const h = this.$createElement;

            this.$notify({
                title: '系统提示',
                message: h('i', {style: 'color: teal'}, '正在打印处方单...'),
                duration: 2500
            });
            let myVar;
            myVar = setTimeout(myFunction, 2000);
            let _this = this;

            function myFunction() {
                _this.$notify({
                    title: '系统提示',
                    message: '打印成功',
                    type: 'success'
                });
            }
        },
        resetForm() {
            this.searchform.casenumber = "";
            this.searchform.isdispense = false;
        }
    },
    mounted() {

    },


}
</script>

<style scoped>
.el-main {
    padding: 30px 60px;
}

.center_container {
    /*position: absolute;*/

}

.top_container {
    height: 196px;
    width: 100%;
}

.center_left_container {
    float: left;
    width: 480px;
    display: inline-block;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    /*box-shadow: rgba(144, 142, 142, 0.17) 0 0 6px 0;*/
    box-shadow: 0 0 39px 0 rgba(0, 0, 0, 0.11);
    padding: 20px;
    padding-top: 50px;
    /*margin-bottom: 20px;*/
}

.radio_container {
    margin-top: 20px;
}

.header_button_submit {
    background-color: #258CE8 !important;
    color: #FFFFFF !important;
    transition: 0.4s;

}

.header_button_reset {
    transition: 0.4s;
}

.header_button_reset:hover {
    box-shadow: 0 4px 5px rgba(0, 0, 0, .11);
    background-color: #FFFFFF;
    color: black;
    border: #E5E5E5 1px solid;
}

.header_button_submit:hover {
    color: #FFFFFF;
    box-shadow: 0 4px 5px rgba(0, 0, 0, .19);
}

.button_container {
    height: 100px;
    margin-left: 70px;
}


.center_right_container {
    float: left;
    width: 614px;

    display: inline-block;
    height: 100%;
    border-radius: 12px;
    /*box-shadow: rgba(144, 142, 142, 0.17) 0 0 6px 0;*/
    box-shadow: 0 0 39px 0 rgba(0, 0, 0, 0.11);
    margin-left: 70px;
    background-color: #FFFFFF;

}


.pagination_container {
    margin: 0 auto;
    text-align: center;
    padding-top: 18px;
    padding-bottom: 34px;

}

.top_button {
    margin-bottom: 20px;
}

.center_main_container {
    width: 100%;
    margin-top: 50px;
    border-radius: 12px;
    padding-top: 8px;
    /*box-shadow: rgba(144, 142, 142, 0.17) 0 0 6px 0;*/
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.12);
    background-color: #F9F6F6;

}

.dispense_table_container {
    background-color: #F9F6F6;
    width: 100%;

}

.edit_refresh:hover,
.edit_refresh:active,
.edit_refresh:focus {
    color: #8E837C;
    border-color: #DFD3C3;
    background-color: #D3E4CD;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.edit_refresh {
    position: relative;
    top: -40px;
    right: 1050px;
    background-color: #D3E4CD;
    transition: 0.2s;
}

.buttonSection_container {
    width: 100%;
    height: 80px;
    background-color: #FFFFFF;

}

.print_container {
    width: 100%;
    padding-left: 510px;
    padding-top: 19px;
}

.printButton {
    background-color: #FABB52;
    color: #FFFFFF;
    transition: 0.2s
}

.printButton:hover,
.printButton:active,
.printButton:focus {
    background-color: #FABB52;
    color: #FFFFFF;
    box-shadow: 0 3px 4px rgb(0 0 0 / 15%);
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 9px;

}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}
</style>
